<template>
	<view class="content">
		<!-- swiper轮播图 -->
		<view class="wrap">
				<u-swiper :list="list"></u-swiper>
		</view>
		<!-- 九宫格 -->
		<u-grid :col="4">
				<u-grid-item v-for="item in picture" :key="item.id">
					<image :src="item.image" style="width: 60rpx; height: 60rpx;"></image>
					<view>{{item.text}}</view>
				</u-grid-item>
		</u-grid>
		<!-- 第一个组件样式 -->
		<orde title='设计方案' title1='|DESIGN WORKS'></orde>
		<view class="box1" v-for=" item in photo" :key="item.id">
		    <view class="text">{{item.text}}</view>
		    <view class="image"><image class="image1" :src="item.image" mode=""/></view>
		</view>
		<!-- 分割线 -->
		<lien></lien>
		<!-- 第二个组件样式 -->
		<view class="box2">
		    <orde title="设计师推荐 |" title1="RECOMMENDED DESIGN"></orde>
		    <view class="top">
		      <view class="box3" v-for="item in photo1" :key="item.id">     
		        <view class="text1">
		              <view class="box2-image"><image class="box2-image1" :src="item.image" mode=""/></view>
		              <view>{{item.text}}</view>
		              <view>{{item.text2}}</view>
		        </view>
		    </view> 
		   </view>
		</view>
		<!-- 分割线 -->
		<lien></lien>
		<!-- 第三个组件样式 -->
		<view class="liangxin">
		    <orde title="良心工艺" title1="|CONSCIENCE CRAFT"></orde>
		    <view class="box4">
		      <view class="box4-left">
		        <view class="box4-left-top">水电工艺</view>
		        <image class="box4-left-image" src="../../static/image/sd.png" mode=""/>   
		      </view>
		      <view class="box4-right">
		        <view class="box4-right-top" v-for="item in photo2" :key="item.id">
		          <view class="box4-mg">{{item.text}}</view>
		          <image class="box4-right-top-image" :src="item.image" mode=""/>
		        </view>
		      </view>
		    </view>
		</view>
		<!-- 分割线 -->
		<lien></lien>
		<!-- 第四个组件样式 -->
		<view class="box5">
		  <orde title="业主故事" title1="OWNER`S STORY"></orde>
		  <view class="box5-top">
		    <view class="box5-left">
		      <view class="box5-left-color">半山壹号 | 张女士</view>
		      <image class="box5-left-image" src="../../static/image/my.png" mode=""/>
		    </view>
		    <view class="box5-left">
		      <view class="box5-right-color">首开琅樾 | 白女士</view>
		      <image class="box5-left-image"  src="../../static/image/my.png" mode=""/>
		    </view>
		  </view>
		</view>
		<!-- 分割线 -->
		<lien></lien>
		<!-- 第五个组件样式 -->
		<view class="box6">
		  <orde title="大业荣誉" title1="|HONOR"></orde>
		  <view class="box6-top">
		    <image style="width: 100%; height: 100%;" src="../../static/image/my.png" mode=""/>
		    <view class="box6-dy">硕果累累 | 初心不忘 以行践言</view>
		  </view>
		</view>
		<!-- 这是分割线 -->
		<lien></lien>
		<!-- 第六个组件样式 -->
		<view class="box7">
		  <orde title="大业美家" title1="ABOUT US"></orde>
		  <view class="box7-top">
		    <view class="box7-top1">
		      <view><image class="box7-top1-image" src="../../static/image/my.png" mode=""/></view>
		      <view class="margin">
		          <view class="span"><span>9</span>年专注</view>
		           <view>做别墅大设计</view>
		      </view>    
		    </view>
		    <view class="box7-top1">
		      <view><image class="box7-top1-image" src="../../static/image/my.png" mode=""/></view>
		      <view class="margin">
		          <view class="span">布局<span>12</span>座</view>
		           <view>核心城市</view>
		      </view>    
		    </view>
		    <view class="box7-top1">
		      <view><image class="box7-top1-image" src="../../static/image/my.png" mode=""/></view>
		      <view class="margin">
		          <view class="span"><span>12</span>家</view>
		           <view>直营分公司</view>
		      </view>    
		    </view>
		    <view class="box7-top1">
		      <view><image class="box7-top1-image" src="../../static/image/my.png" mode=""/></view>
		      <view class="margin">
		            <view class="span"><span>8500</span>个家庭</view>
		            <view>的一致选择</view>
		      </view>    
		    </view>
		  </view>
		</view>
		<!-- 第七个组件样式 -->
		<view class="box8">
		    <view class="box8-top">
			
		      <view class="box8-top-left"></view>
		      <view class="box8-top-center">
		        <view><image class="box8-top-center-image" src="../../static/image/team.png" mode=""/></view>
		        <view class="margin1">
		            <view>service</view>
		            <view>全过程服务体系</view>
		        </view>        
		      </view>
		      <view class="box8-top-right"></view>
		    </view>
		    <view class="box8-bottom">
		      <view class="box8-photo1" v-for="item in photo3 " :key="item.id">
		          <view class="box8-photo" >
		            <view><image class="box8-bottom-image" :src="item.image" mode=""/></view>
		            <view>{{item.text}}</view>
		          </view>
		      </view>
		    </view>
		</view>
		<!-- 预约装修 -->
		<booking></booking>
		<!-- 贵宾热线 -->
		<hotline></hotline>
	</view>
</template>

<script>
import orde from '../../components/orde/orde.vue'
import lien from '../../components/lien/lien.vue'
import booking from '../../components/booking/booking.vue'
import hotline from '../../components/hotline/hotline.vue'
	export default {
		components:{
			orde,
			lien,
			booking,
			hotline
		},
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				picture:[
						  {id:1, text:"装修报价", image:"../../static/image/报价 (1).png"},
					      {id:2, text:"设计师", 	 image:"../../static/image/设计师.png"},
					      {id:3, text:"设计方案", image:"../../static/image/设计方案-2.png"},
					      {id:4, text:"关于总裁", image:"../../static/image/Boss-老板-1.png"},
					      {id:5, text:"全案体系", image:"../../static/image/安全体系.png" },
					      {id:6, text:"良心工程", image:"../../static/image/报价 (1).png"},
					      {id:7, text:"极致环保", image:"../../static/image/绿色环保会场.png"},
					      {id:8, text:"客户服务", image:"../../static/image/客户服务  客服.png"}

				],
				photo:[
				      {id:1, text:"蠡湖一号 | 400平方米 | 现代简约",image:"../../static/image/OIP2-C.png"},
				      {id:2, text:"高尔夫别墅 | 400平方米 | 现代简约",image:"../../static/image/OIP2-C.png"},
				    ],
				photo1:[
					    {id:1, text:"王艺哲",text2:"郑州分公司设计总监",image:"../../static/image/my.png"},
					    {id:2, text:"张猛",text2:"沈阳分公司设计总监",image:"../../static/image/my.png"},
					    {id:3, text:"艾武",text2:"北京分公司设计总监",image:"../../static/image/my.png"}
					],
				photo2:[
				        {id:1,image:"../../static/image/mg.png" ,text:"木工工程"},
				        {id:2,image:"../../static/image/mg.png" ,text:"瓦工工程"},
				        {id:3,image:"../../static/image/mg.png" ,text:"油工工程"},
				        {id:4,image:"../../static/image/mg.png" ,text:"文明施工"}
				    ],
				photo3:[
				      {id:1,text:"客户管家", image:"../../static/image/客户服务  客服.png"},
				      {id:2,text:"微信服务群", image:"../../static/image/企业微信.png"},
				      {id:3,text:"总裁办回访", image:"../../static/image/agent.png"},
				      {id:4,text:"总经理每周巡检", image:"../../static/image/已关联.png"},
				      {id:5,text:"感恩行&美家会", image:"../../static/image/gift.png"},
				      {id:6,text:"终身维修", image:"../../static/image/维修.png"},
				    ]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	// 第一个组件
	.box{
	  width: 90%;
	  margin: auto;
	  
	}
	//第一个盒子
	.box1{
	margin: auto;
	  width: 90%;
	  position: relative;
	  margin-top: 10rpx;
	.image{
	    margin-top: 20rpx;
	    width: 100%;
	    height: 350rpx;
		.image1{
			width: 100%;
			height: 300rpx;
		}
	  }
	  .text{
	    width: 100%;
	    color: white;
	    background-color: rgba(0, 0, 0, 0.5);
	    position: absolute;
	    margin-top:300rpx; 
	  }
	}
	//第二个盒子
	.box2{
	  width: 100%;
	  margin: auto;
	  margin-top: 20rpx;
	  margin-bottom: 20rpx;
	  .box2-image{
		  height: 260rpx;
		  width: 100%;
		  .box2-image1{
			  width: 100%;
			  height: 270rpx;
		  }
	  }
	  .top{
		width: 90%;
		margin: auto;
		
	    display: flex;
	    justify-content: space-between;
		.box3{
		  width: 30%;
		  .text1{
		    font-size: 20rpx;
		    text-align: center;
		    background-color: #efefef;
		  }
		  .text1 :nth-child(3){
			height: 30rpx;
			line-height: 30rpx;
		    color:#000 ;
		  }
		  .text1 :nth-child(2){
		  	height: 40rpx;
			line-height: 40rpx;
		    color:#bcc5d5 ;
		  	
		  }
		}
	  }
	}
	// 第三个盒子
	.liangxin{
	  width: 100%;
	  margin: auto;
	  margin-top: 20rpx;
	  .box4{
		width: 90%;
		margin: auto;
	    display: flex;
	    justify-content: space-between;
		.box4-left{
		  width: 48%;
		  position: relative;
		  .box4-left-image{
			
		    width: 100%;
		    height: 400rpx;
		  }
		  .box4-left-top{
		    color: white;
		    font-size: 30rpx;
		    width: 300rpx;
		    text-align: center;
		    height: 50rpx;
		    line-height: 50rpx;
		    background-color: rgba(0, 0, 0, 0.5);
		    position: absolute;
		    margin-top: 0rpx;
			z-index: 999;
		  }
		}
		.box4-right{
		  width: 48%;
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
		  .box4-right-top {
		    width: 48%;
		    position: relative;
			.box4-right-top-image{
			  width: 100%;
			  height: 200rpx;
			  
			}
			.box4-mg{
			  color: white;
			  font-size: 30rpx;
			  width: 150rpx;
			  text-align: center;
			  height: 60rpx;
			  line-height: 60rpx;
			  background-color: rgba(0, 0, 0, 0.5);
			  position: absolute;
			  margin-top: 0rpx;
			  z-index: 999;
			}
					
		  }
		  
		}
	  }
	}
	
	// 第四个盒子
	.box5{
	  width: 100%;
	  margin: auto;
	  margin-top: 20rpx;
	  .box5-top{
		width: 90%;
		margin: auto;
	    margin-top: 20rpx;
	    margin-bottom: 20rpx;
	    display: flex;
	    justify-content: space-between;
		.box5-left{
		  width: 48%;
		  height: 400rpx;
		  position: relative;
		}
		.box5-left-image{
		  width: 100%;
		  height: 400rpx;
		}
		.box5-left-color, .box5-right-color{
		  color: white;
		  font-size: 30rpx;
		  width: 163px;
		  text-align: center;
		  height: 50rpx;
		  line-height: 50rpx;
		  background-color: rgba(0, 0, 0, 0.5);
		  position: absolute;
		  bottom: 0;
		  z-index: 999;
		}
	  }
	}
	// 第五个盒子
	.box6{
	  width: 100%;
	  margin: auto;
	  margin-top: 20rpx;
	  .box6-top{
		width: 90%;
		margin: auto;
		height: 580rpx;
	    position: relative;
		.box6-dy{
		  color: white;
		  font-size: 30rpx;
		  width: 99%;
		  height: 50rpx;
		  line-height: 50rpx;
		  background-color: rgba(0, 0, 0, 0.5);
		  position: absolute;
		  bottom: 8rpx;
		  z-index: 999;
		}
	  }
	}
	//第六个盒子
	.box7{
	  width: 100%;
	  margin: auto;
	  margin-bottom: 20rpx;
	  margin-top: 20rpx;
	  .box7-top{
		width: 90%;
		margin: auto;
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
		.box7-top1{
		  margin-top: 20rpx;
		  width: 48%;
		  display: flex;
		  justify-content:safe;
		  font-size: 20rpx;
		  .box7-top1-image{
		    width: 150rpx;
		    height: 150rpx;
		  }
		  .margin{
		    margin-left:20rpx;
		    margin-top: 30rpx;
			span{
			  font-weight: bold;
			  border-bottom: 2px solid black;
			  font-size: 30rpx;
			}
			.span{
			  margin-bottom: 10rpx;
			  font-weight: bold;
			}
		  }
		}
	  }
	}
	// 第七个盒子
	.box8{
	  width: 90%;
	  margin: auto;
	  height: 450rpx;
	  background-color: rgb(239, 239, 239);
	  .box8-top{
	    display: flex;
	    justify-content: space-around;
		.box8-top-left{
		  width: 28%;
		  border-bottom:1rpx solid  #cecece;
		  height: 80rpx;
		}
		.box8-top-right{
		  width: 28%;
		  border-bottom:1rpx solid  #cecece;
		  height: 80rpx;
		}
		
		.box8-top-center-image{
		  width:80rpx;
		  height: 80rpx;
		}
		.box8-top-center{
		  font-size: 25rpx;
		  width: 39%;
		  margin-top: 25rpx;
		  display: flex;
		  justify-content: space-between;
		  .margin1{
		    margin-top: 10rpx;
		  }
		}
	  }
	  .box8-bottom{
	   display: flex;
	   justify-content: space-between;
	   flex-wrap: wrap;
	   .box8-photo1{
	     text-align: center;
	     width: 30%;
	     margin-top: 30rpx;
	     font-size: 25rpx;
	     .box8-bottom-image{
	       width: 80rpx;
	       height: 80rpx;
	     }
	   }
	  }
	}
}
</style>
